Introdução à Lógica de Programação

Aula 11 - Escopo de variáveis

Helder Jefferson Ferreira da Luz

helder.luz@ifpr.edu.br

Objetivos da aula

• Compreender o conceito de escopo de variáveis.
• Diferenciar var, let e const.
• Conhecer as convenções de estilização de código.

Escopo de variáveis

Escopo Global

• Variáveis declaradas fora de qualquer função ou bloco.
• Acessíveis em qualquer parte do código, inclusive dentro de funções.

var globalVar = "Eu sou global!";
function exemplo() {
    console.log(globalVar); // Funciona aqui
}
console.log(globalVar); // Funciona aqui também

Escopo de variáveis

Escopo de Função

• Variáveis declaradas dentro de uma função.
• Acessíveis apenas dentro da função onde foram declaradas.

function exemplo() {
    var funcVar = "Eu sou de função!";
    console.log(funcVar); // Funciona aqui
}
console.log(funcVar); // Erro: funcVar não está definida

Escopo de variáveis

Escopo de Bloco

• Variáveis declaradas dentro de um bloco ({}), como em if, for ou while.
• Acessíveis apenas dentro do bloco onde foram declaradas.
• Aplicável apenas a let e const.

if (true) {
    let blocoVar = "Eu sou de bloco!";
    console.log(blocoVar); // Funciona aqui
}
console.log(blocoVar); // Erro: blocoVar não está definida

Diferenças entre var, let e const

var

• Escopo global ou de função (não respeita blocos).
• Pode ser redeclarada.

if (true) {
    var x = 10;
}
console.log(x); // Funciona, mesmo fora do bloco

Diferenças entre var, let e const

let

• Escopo de bloco.
• Não pode ser redeclarada no mesmo escopo.

if (true) {
    let y = 20;
}
console.log(y); // Erro: y não está definida

Diferenças entre var, let e const

const

• Escopo de bloco.
• Não pode ser redeclarada ou reatribuída.

const z = 30;
z = 40; // Erro: não é permitido reatribuir

Hoisting

• O hoisting é o comportamento do JavaScript de mover declarações para o topo do escopo.
• Apenas a declaração é movida, não a inicialização.

Exemplo com var:

console.log(a); // undefined
var a = 10;

Hoisting

Exemplo com let:

console.log(b); // Erro: Cannot access 'b' before initialization
let b = 20;

• var é "içada" e inicializada como undefined.
• let e const são "içadas", mas não inicializadas.

Tabela Comparativa

Convenções de estilização de código

Convenções de nomenclatura

Principais padrões de nomenclatura:

camelCase - Primeira palavra minúscula, demais iniciam com maiúscula

let nomeUsuario = "João";
function calcularIdade() { ... }

PascalCase - Todas as palavras iniciam com maiúscula

class MinhaClasse { ... }
function MinhaFuncaoEspecial() { ... }

Convenções de nomenclatura

snake_case - Palavras separadas por underscore, tudo minúsculo

let nome_usuario = "João"; // Não recomendado em JS

SNAKE_CASE - Como snake_case, mas tudo maiúsculo. Também conhecido como SCREAMING_SNAKE_CASE

const MAX_TENTATIVAS = 3;
const URL_BASE = "https://api.exemplo.com";

Convenções de nomenclatura

Outros padrões menos comuns:

kebab-case - Palavras separadas por hífen

<!-- Usado em HTML/CSS, não válido em JavaScript -->
<div class="meu-componente"></div>

Convenções de estilização de código

Nomenclatura de Variáveis e Funções

• Use camelCase para variáveis e funções
• Nomes descritivos e significativos
• Evite abreviações desnecessárias

//  Bom
let nomeUsuario = "João";
let idadeUsuario = 25;
function calcularIdade(anoNascimento) { ... }

//  Ruim
let n = "João";
let id = 25;
function calc(ano) { ... }

Convenções de estilização de código

Constantes

• Use SNAKE_CASE em maiúscula para constantes globais
• Use camelCase para constantes locais com const

//  Constantes globais
const MAX_TENTATIVAS = 3;
const URL_BASE = "https://api.exemplo.com";

//  Constantes locais
const nomeCompleto = "João Silva";
const configuracao = { tema: "dark" };

Convenções de estilização de código

Resumo de nomeação para JavaScript:

• camelCase: variáveis, funções, métodos
• PascalCase: classes, construtores
• SNAKE_CASE: constantes globais
• kebab-case: não é válido em JS (apenas HTML/CSS)

Convenções de estilização de código

Indentação e Espaçamento

• Use 2 ou 4 espaços para indentação (seja consistente)
• Espaços ao redor de operadores
• Linha em branco entre blocos lógicos

Convenções de estilização de código

Indentação e Espaçamento

//  Bom
function calcularMedia(notas) {
    let soma = 0;
    
    for (let i = 0; i < notas.length; i++) {
        soma += notas[i];
    }
    
    return soma / notas.length;
}

//  Ruim
function calcularMedia(notas){
let soma=0;
for(let i=0;i<notas.length;i++){
soma+=notas[i];}
return soma/notas.length;}

Convenções de estilização de código

Comprimento de Linha

• Máximo de 80-120 caracteres por linha
• Quebrar linhas longas de forma legível

//  Bom
const mensagem = `Esta é uma mensagem muito longa que precisa \
ser quebrada em várias linhas para melhor legibilidade`;

//  Bom - parâmetros de função
function criarUsuario(
    nome, 
    email, 
    idade, 
    endereco
) {
    // código da função
}

Convenções de estilização de código

Há diversos padrões de estilização para JavaScript, dentre eles:

• JavaScript Standard Style - https://github.com/standard/standard
• Airbnb JavaScript Style - https://github.com/airbnb/javascript
• Google JavaScript Style - https://google.github.io/styleguide/jsguide.html
• W3Schools JavaScript Style - https://www.w3schools.com/js/js_conventions.asp

Dúvidas?

Exercícios

1. Explique a diferença entre var, let e const.

2. Explique o conceito de hoisting e como ele afeta var, let e const.

3. Corrija o código abaixo para seguir as convenções de nomenclatura e criação de variáveis:

var n = "João";
var i = 25;
function calc_idade(ano) {
    return 2024 - ano;
}

Exercícios

4. Identifique o escopo das variáveis e a saída no código abaixo:

if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a); // ?
console.log(b); // ?
console.log(c); // ?

5. Corrija os problemas de declaração no código:

let nome = "Ana";
let nome = "Carlos"; // Problema aqui
const idade = 25;
idade = 30; // Problema aqui

Exercícios

6. Corrija os problemas de estilização no código abaixo:

function calcular(a,b,c){
var resultado=a+b*c
if(resultado>100){
console.log("Resultado muito alto")
return resultado
}else{
console.log("Resultado normal")
return resultado
}}

Exercícios

7. Analise o comportamento do hoisting no código:

console.log(x); // ?
console.log(y); // ?
console.log(z); // ?

var x = 1;
let y = 2;
const z = 3;

Exercícios

8. Identifique qual declaração usar (var, let ou const) em cada caso:

// Configuração que nunca muda
____ URL_API = "https://api.exemplo.com";

// Contador em um loop
for (____ i = 0; i < 10; i++) {
    // Nome que pode mudar durante execução
    ____ nomeAtual = obterNome(i);
    
    // Valor calculado que não muda no loop
    ____ valorFixo = i * 2;
    // ...resto do código
}